<template>
	<div>
		<!-- 任务页面列表 -->
		<!-- 加载 -->
		<div class="example">
			<a-spin size="large" tip="Loading..." :spinning="spinning" />
		</div>
		<div v-if="spinning ==false">
			<a-card>
				<div :class="advanced ? 'search' : null">
				<a-form layout="horizontal" :form="form" @submit="handleSubmit">
					<div :class="advanced ? null: 'fold'">
					<a-row >
					<a-col :md="6" :sm="24" >
						<a-form-item
						:labelCol="{span: 2}"
						:wrapperCol="{span: 18, offset: 1}"
						>
							<a-select 
							v-decorator="[
								'task_status',
								]"
							placeholder="请选择任务状态" :allowClear="true">
								<a-select-option value="WAITING">待执行</a-select-option>
								<a-select-option value="RUNNING">执行中</a-select-option>
								<a-select-option value="DONE">执行完成</a-select-option>
								<a-select-option value="CLOSE">已关闭</a-select-option>
							</a-select>

						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="24" >
						<a-form-item
						:labelCol="{span: 2}"
						:wrapperCol="{span: 18, offset: 1}"
						>
						<a-select 
						v-decorator="[
							'task_type',
							]"
						placeholder="请选择任务类型" :allowClear="true">
						<a-select-option value="OCEAN_VIDEO_UPLOAD">巨量视频上传</a-select-option>
						<a-select-option value="OCEAN_IMAGE_UPLOAD">巨量图片上传</a-select-option>
						<a-select-option value="OCEAN_SYNC">巨量同步</a-select-option>
						<a-select-option value="OCEAN_AD_CREATIVE_CREATE">巨量计划创意创建</a-select-option>
						</a-select>
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="24" >
						<a-form-item
						:labelCol="{span: 2}"
						:wrapperCol="{span: 18, offset: 1}"
						>
						<a-input v-decorator="[
							'name',
							]"
					placeholder="请输入名称关键词" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="24" >
						<a-form-item
						:labelCol="{span: 2}"
						:wrapperCol="{span: 18, offset: 1}"
						>
							<a-range-picker 
							style="width: 200px"
							v-decorator="[
							'create_time',
							]" placeholder="选择开始日期-结束日期"
							@change="ondates"
							/>
						</a-form-item>
					</a-col>
					</a-row>
					
					</div>
					<span style="float: right; margin-top: 3px;">
					<a-button type="primary" @click="queryresult">查询</a-button>
					<a-button @click="btncancel" style="margin-left: 8px">重置</a-button>
					</span>
				</a-form>

				</div>
				<div>
				<a-modal
					title="子任务列表"
					:visible="visible"
					:confirm-loading="confirmLoading"
					@ok="handleOk"
					@cancel="handleCancel"
					:width="1200"
				>
					
					<a-table 
					:columns="tasktype =='OCEAN_VIDEO_UPLOAD' ? videolabel : tasktype =='OCEAN_IMAGE_UPLOAD' ? imagelabel : tasktype =='OCEAN_SYNC' ? oceanlabel : tasktype =='OCEAN_AD_CREATIVE_CREATE' ? acountlabel : ''"
					:scroll="{ x: 210, y: 500 }"
					:pagination="false"
					:data-source="tasksonlist">

					<div slot="statusDemo" slot-scope="text">
						<span v-if="text.exec_status =='WAITING'"><a-icon type="clock-circle" style="font-size:20px;color:#6ed720;" />待执行</span>
						<span v-if="text.exec_status =='SUCCESS'"><a-icon type="check-circle" style="font-size:20px;color:#6ed720;" /><a>执行成功</a></span>
						<span v-if="text.exec_status =='FAIL'">
							<a style="color:red;">
								<a-tooltip :title="text.fail_reason">
									<a-icon type="info-circle" style="font-size:20px;" />执行失败
								</a-tooltip>
							</a>
						</span>
					</div>

					<div slot="videoDemo" slot-scope="text">
							<video
							ref="refVideo"
							playsinline="true"
							type="video/mp4"
							controls
							muted
							style="width:100%;"
							:src="text" />
					</div>

					<div slot="imageDemo" slot-scope="text">
						<a :href="text" target="_blank"><img :src="text" style="width:100%;" alt=""></a>
					</div>
					
					<!-- 巨量同步 -->
					<div slot="oceanDemo" slot-scope="text" v-if="tasktype =='OCEAN_SYNC'">
						<span v-if="text.sync_type =='CAMPAIGN'">广告组</span>
						<span v-if="text.sync_type =='AD'">计划</span>
						<span v-if="text.sync_type =='VIDEO'">视频</span>
						<span v-if="text.sync_type =='AD_CONVERT'">转化目标</span>
					</div>
					<!-- 计划创意 -->
					<div slot="adDemo" slot-scope="text" v-if="tasktype =='OCEAN_AD_CREATIVE_CREATE'">
						{{text.ad.name}}
					</div>

					<div slot="creativeDemo" slot-scope="text" v-if="tasktype =='OCEAN_AD_CREATIVE_CREATE'">
					{{text.creative.creativeslist.name}}
					</div>

					<div slot="adminDemo" slot-scope="text">
						<span v-if="text.admin_id ==0">系统</span>
						<span v-else>
							<strong v-if="text.name !=undefined">{{text.name}}</strong>
							<strong v-else-if="text.admin_user !=undefined">{{text.admin_user.name}}</strong>
							<strong v-else>{{text}}</strong>
					
						</span>
					</div>

						<div slot="detailsDemo" slot-scope="text">
							<span @click="detailinfo(text.id,tasktype)"><a>详情</a></span>
						</div>
					</a-table>
				</a-modal>


					<a-modal
					title="子任务详情"
					:visible="taskvisible"
					:confirm-loading="confirmLoading"
					@ok="taskOk"
					@cancel="taskCancel"
					:width="700"
					:footer="null"
					>

					<a-form :form="form2">
						<a-form-item
						:labelCol="{span: 2}"
						:wrapperCol="{span: 18, offset: 1}"
						>
							<a-textarea
							style="width:100%;"
							v-decorator="[
							'jsondatas',
							{ rules:[],initialValue:jsondata }
							]"
							:auto-size="{ minRows: 16, maxRows: 8 }"
							/>
						</a-form-item>
					</a-form>

					</a-modal>

				<a-table
					:columns="columns"
					:dataSource="dataSource.list"
					:selectedRows.sync="selectedRows"
					@clear="onClear"
					:pagination="paginationOpt"
					 :loading='tableloading'
				>
				<!-- 状态 -->
					<div slot="statusDemo" slot-scope="text">
					<span v-if="text =='WAITING'"><a-icon type="clock-circle" style="font-size:20px;color:blue;" />待执行</span>
					<span v-else-if="text == 'RUNNING'"><a-icon type="clock-circle" style="font-size:20px;color:blue;" />执行中</span>
					<span v-else-if="text == 'DONE'"><a-icon type="check-circle" style="font-size:20px;color:#6ed720;" />执行完成</span>
					<span v-else-if="text == 'CLOSE'"><a-icon type="info-circle" style="font-size:20px;color:red;" />已关闭</span>
					<span v-else>不限</span>
					</div>

					<div slot="typeDemo" slot-scope="text">
						<span v-if="text =='OCEAN_VIDEO_UPLOAD'">巨量视频上传</span>
						<span v-else-if="text =='OCEAN_IMAGE_UPLOAD'">巨量图片上传</span>
						<span v-else-if="text =='OCEAN_SYNC'">巨量同步</span>
						<span v-else-if="text =='OCEAN_AD_CREATIVE_CREATE'">巨量计划创意创建</span>
					</div>

					<div slot="accountDemo" slot-scope="text">
						<!-- {{text}} -->
						<span v-if="text !=''&&text !=undefined">
						{{text.name}}
						</span>
						<span v-else>
							系统
						</span>
					</div>

					<!-- 任务汇总 -->
					<div slot="taskcountDemo" slot-scope="text">
						<div>总：{{text.total}}
							<div>成功：{{text.SUCCESS}}</div>
							<div>待执行：{{text.WAITING}}</div>
							<div>失败：<span style="color:red;">{{text.FAIL}}</span></div>
						</div>
					</div>
				
					<!-- 操作 -->
					<div slot="action" slot-scope="text">
					<a style="margin-right: 8px" @click="editRecord(text)">
							查看子任务
					</a>
					<!-- <a @click="deleteRecord(record.key)">
						<a-icon type="delete" />删除
					</a> -->
					</div>

				</a-table>
			

				</div>
			</a-card>
		</div>
	</div>
</template>

<script>
import {ALLTASK,ACCOUNTURL,OCEANLIST,VIDEOLIST,IMAGELIST,CREATELIST,OCEANPAGE,VIDEOPAGE,IMAGEPAGE,CREATEPAGE} from '@/services/api'
// import StandardTable from '@/components/table/StandardTable'
import {ajaxparems} from '@/services/ajaxrequest'
const columns = [
    {
    title: '任务ID',
    dataIndex:'id',
  },
{
    title: '任务状态',
    dataIndex:'task_status',
    scopedSlots: { customRender: 'statusDemo' }
  },
  {
    title: '任务名称',
    dataIndex: 'name',
  },
  {
    title: '任务类型',
    dataIndex: 'task_type',
    scopedSlots: { customRender: 'typeDemo' }
  },
  {
    title: '管理员',
	dataIndex: 'admin_user',
	scopedSlots: { customRender: 'accountDemo' }
  },
    {
    title: '创建时间',
	dataIndex: 'created_at',
  },
  {
    title: '修改时间',
	dataIndex: 'updated_at',
  },
  {
    title: '数量',
    dataIndex: 'sub_task_count',
    scopedSlots: { customRender: 'taskcountDemo' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  },
]

//计划创意
var acountlabel = [
    {
		title:'子任务ID',
		dataIndex:'id',
    },
    {
		title:'广告计划',
        dataIndex:'data',
        scopedSlots: { customRender: 'adDemo' }
    },
    {
		title:'广告创意',
        dataIndex:'data',
        scopedSlots: { customRender: 'creativeDemo' }
    },
    {
		title:'管理员',
        dataIndex:'admin_user',
        scopedSlots: { customRender: 'adminDemo' }
    },
    {
		title: '状态',
        scopedSlots: { customRender: 'statusDemo' }
	},
    {
		title: '创建时间',
	    dataIndex: 'created_at',
    },
    {
		title: '操作',
	    scopedSlots: { customRender: 'detailsDemo' }
    },
]
//视频
var videolabel = [
    {
		title:'子任务ID',
		dataIndex:'id',
    },
    {
		title:'应用id',
		dataIndex:'app_id',
        // scopedSlots: { customRender: 'adDemo' }
    },
    {
		title:'素材系统视频ID',
        dataIndex:'n8_material_video_id',
        // scopedSlots: { customRender: 'creativeDemo' }
    },
	{
		title:'素材系统视频地址',
        dataIndex:'n8_material_video_path',
        scopedSlots: { customRender: 'videoDemo' }
    },
	{
		title:'素材系统视频名称',
        dataIndex:'n8_material_video_name',
        // scopedSlots: { customRender: 'creativeDemo' }
    },
    {
		title:'管理员ID',
        dataIndex:'admin_id',
        scopedSlots: { customRender: 'adminDemo' }
    },
    {
		title: '状态',
        scopedSlots: { customRender: 'statusDemo' }
	},
    {
		title: '创建时间',
	    dataIndex: 'created_at',
    },
    {
		title: '操作',
	    scopedSlots: { customRender: 'detailsDemo' }
    },
]
//图片
var imagelabel = [
    {
		title:'子任务ID',
		dataIndex:'id',
    },
    {
		title:'应用id',
		dataIndex:'app_id',
        // scopedSlots: { customRender: 'adDemo' }
    },
    {
		title:'素材系统图片ID',
        dataIndex:'n8_material_image_id',
        // scopedSlots: { customRender: 'creativeDemo' }
    },
	{
		title:'素材系统图片地址',
        dataIndex:'n8_material_image_path',
        scopedSlots: { customRender: 'imageDemo' }
    },
	{
		title:'素材系统图片名称',
        dataIndex:'n8_material_image_name',
        // scopedSlots: { customRender: 'creativeDemo' }
    },
    {
		title:'管理员ID',
        dataIndex:'admin_id',
        scopedSlots: { customRender: 'adminDemo' }
    },
    {
		title: '状态',
        scopedSlots: { customRender: 'statusDemo' }
	},
    {
		title: '创建时间',
	    dataIndex: 'created_at',
    },
    {
		title: '操作',
	    scopedSlots: { customRender: 'detailsDemo' }
    },
]
//巨量同步
var oceanlabel = [
    {
		title:'子任务ID',
		dataIndex:'id',
    },
    {
		title:'应用id',
		dataIndex:'app_id',
        // scopedSlots: { customRender: 'adDemo' }
    },
	{
		title:'同步类型',
		scopedSlots: { customRender: 'oceanDemo' }
	},
    {
		title:'管理员ID',
        scopedSlots: { customRender: 'adminDemo' }
    },
    {
		title: '状态',
        scopedSlots: { customRender: 'statusDemo' }
	},
    {
		title: '创建时间',
	    dataIndex: 'created_at',
    },
    {
		title: '操作',
	    scopedSlots: { customRender: 'detailsDemo' }
    },
]

var dataSource = [];
var datalist =[];
var tasksonlist = [];
export default {
  	name: 'QueryList',
   	created(){
		this.listNew();
	},
	beforeCreate() {
		this.form = this.$form.createForm(this);
		this.form2 = this.$form.createForm(this);
	},
  inject:['reload'],
	data () {
		return {
			spinning:true,
			advanced: false,
			columns: columns,
			dataSource:dataSource,
			selectedRows: [],
			visible:false,
			acountlabel,
			videolabel,
			imagelabel,
			oceanlabel,
			datalist,
            checkaccount:[],
            dateFormat: 'YYYY/MM/DD',
            monthFormat: 'YYYY/MM',
            datas:[],
			tasksonlist,
			taskvisible:false,
			jsondata:'',
			tasktype:'',

			tableloading:true,

			paginationOpt: {
				defaultCurrent: 1, // 默认当前页数
				defaultPageSize: 10, // 默认当前页显示数据的大小
				total: 0, // 总数，必须先有
				showSizeChanger: true,
				showQuickJumper: true,
				pageSizeOptions: ["5", "10", "15", "20"],
				showTotal: (total) => `共 ${total} 条`, // 显示总数
				onShowSizeChange: (current, pageSize) => {
					this.paginationOpt.defaultCurrent = current;
					this.paginationOpt.defaultPageSize = pageSize;
					this.listNew(); //显示列表的接口名称
				},
				// 改变每页数量时更新显示
				onChange: (current, size) => {
					console.log(current);
					this.paginationOpt.defaultCurrent = current;
					this.paginationOpt.defaultPageSize = size;
					this.listNew();
				},
			},
		}
	},
	authorize: {
		deleteRecord: 'delete'
	},
  	methods: {
		synction(){
			//同步
			this.visible = true;
		},
		handleCancel(){
			// 取消同步
			this.visible = false;
		},
		onSearch(e){
			// 同步账号搜索
			var parems = {"filtering":[
				{"field":'name',"operator":'LIKE',"value":e},
				// {"field":'account_id',"operator":'IN',"value":e}
			]};
			ajaxparems(ACCOUNTURL,parems).then((res) => {
				var result=res.data;
				if(result.code =="SUCCESS"){
					this.datalist =result.data;
				}else{
 					this.$message.error(result.message, 3)
				}
			})
        },
        ondates(value, dateString){
           this.datas = dateString;
        },
		handleOk(){
            // 确定同步
            this.visible = false;
			// if(this.checkaccount.length <=0){
			// 	this.$message.error("请选择同步账号");
			// 	return;
			// }
			// var parems = {"filtering":[
			// 	{"field":"account_id","operator":"IN","value":this.checkaccount},
			// ]};
			// ajaxparems(ALLTASK,parems).then((res) => {
			// 	var result=res.data;
			// 	if(result.code =="SUCCESS"){
			// 		this.dataSource =result.data.list;
			// 	}else{
			// 		this.$message.error(result.message, 3)
			// 	}
			// })
		},
		deleteRecord(key) {
			this.dataSource = this.dataSource.filter(item => item.key !== key)
			this.selectedRows = this.selectedRows.filter(item => item.key !== key)
		},
		btncancel(){
			//   重置
			this.form.resetFields();
        },
        detailinfo(e,type){
			// 详情
			this.taskvisible = true;
			var parems = {id:e}
			if(type =="OCEAN_VIDEO_UPLOAD"){
				ajaxparems(VIDEOPAGE,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						// this.dataSource =result.data.list;
						var datajson = JSON.stringify(result.data);
						this.jsondata = datajson;
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}else if(type =="OCEAN_IMAGE_UPLOAD"){
				ajaxparems(IMAGEPAGE,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						// this.dataSource =result.data.list;
						var datajson = JSON.stringify(result.data);
						this.jsondata = datajson;
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}else if(type =='OCEAN_SYNC'){
				ajaxparems(OCEANPAGE,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						// this.dataSource =result.data.list;
						var datajson = JSON.stringify(result.data);
						this.jsondata = datajson;
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}else if(type =='OCEAN_AD_CREATIVE_CREATE'){
				ajaxparems(CREATEPAGE,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						// this.dataSource =result.data.list;
						var datajson = JSON.stringify(result.data);
						this.jsondata = datajson;
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}
		},
		taskCancel(){
			this.taskvisible = false;
		},
		queryresult(){
			this.listNew();
		},
		handleSubmit(res){
			console.log(res);
		},
		toggleAdvanced () {
		this.advanced = !this.advanced
		},
		remove () {
		this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
		this.selectedRows = []
		},
		onClear() {
		this.$message.info('您清空了勾选的所有行')
		},
		onStatusTitleClick() {
		this.$message.info('你点击了状态栏表头')
		},
		onChange() {
		this.$message.info('表格状态改变了')
		},
		onSelectChange() {
		this.$message.info('选中行改变了')

		},
		addNew () {
			this.$router.push('/promotion/advering/addadver')
		},
		editRecord(e){
			this.tasktype = e.task_type;
			//查看子任务list表
			var parems = {};
			if(e.task_type == 'OCEAN_SYNC'){
				//OCEAN_SYNC巨量同步
				parems = {"filtering":[{"field":'task_id',"operator":'EQUALS',"value":e}]};
				ajaxparems(OCEANLIST,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.visible = true;
						if(result.data.list.length >0){
							this.tasksonlist = result.data.list;
						}else{
							this.tasksonlist = [];
						}
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}else if(e.task_type =='OCEAN_VIDEO_UPLOAD'){
				//巨量视频
				parems = {"filtering":[{"field":'task_id',"operator":'EQUALS',"value":e}]};
				ajaxparems(VIDEOLIST,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.visible = true;
						if(result.data.list.length >0){
							this.tasksonlist = result.data.list;
						}else{
							this.tasksonlist = [];
						}
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}else if(e.task_type =='OCEAN_IMAGE_UPLOAD'){
				//巨量图片
				parems = {"filtering":[{"field":'task_id',"operator":'EQUALS',"value":e}]};
				ajaxparems(IMAGELIST,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.visible = true;
						if(result.data.list.length >0){
							this.tasksonlist = result.data.list;
						}else{
							this.tasksonlist = [];
						}
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}else if(e.task_type =='OCEAN_AD_CREATIVE_CREATE'){
				//巨量创意计划
				parems = {"filtering":[{"field":'task_id',"operator":'EQUALS',"value":e}]};
				ajaxparems(CREATELIST,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.visible = true;
						if(result.data.list.length >0){
							this.tasksonlist = result.data.list;
						}else{
							this.tasksonlist = [];
						}
					}else{
						this.$message.error(result.message, 3)
					}
				})
			}
		},
		listNew() {
			this.tableloading = true;
			const { defaultCurrent, defaultPageSize } = this.paginationOpt;
			this.form.validateFieldsAndScroll((err, values) => {
				var parems = {};
                var paremsinfo = [];
				if(values['task_status'] !=undefined){
					paremsinfo.push({"field":"task_status","operator":"EQUALS","value":values['task_status']})
				}
				if(values['task_type'] !=undefined){
					paremsinfo.push({"field":"task_type","operator":"EQUALS","value":values['task_type']})
				}
				if(values['name'] !=undefined){
					paremsinfo.push({"field":"name","operator":"LIKE","value":values['name']})
				}
				if(values['create_time'] !=undefined){
					
                    if(this.datas[0] !='' && this.datas[1] !=undefined){
                        paremsinfo.push({"field":"created_at","operator":"LESS_EQUALS","value":this.datas[0]})
                        paremsinfo.push({"field":"created_at","operator":"GREATER_EQUALS","value":this.datas[1]})
                    }
                }
				if(paremsinfo.length >0){
					parems = {
						page:defaultCurrent,
						page_size:defaultPageSize,
						"filtering":paremsinfo
					};
				}else{
					parems = {
						page:defaultCurrent,
						page_size:defaultPageSize,
					}
				}
               

				ajaxparems(ALLTASK,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.dataSource =result.data;
						this.paginationOpt.total = result.data.page_info.total;
						this.tableloading = false;
					}else{
						this.tableloading = false;
						this.$message.error(result.message, 3)
					}
            	})
			});
			this.spinning = false;
		},
		handleMenuClick (e) {
		if (e.key === 'delete') {
			this.remove()
		}
		}
  },computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
			this.selectedRows = selectedRows;
        //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      };
    },
    rowacountlist() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
		//   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
			this.checkaccount = selectedRows;
        },
      };
    }
  }
}
</script>

<style lang="less" scoped>
 .example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
  }
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
